<!DOCTYPE HTML>
<html>
	<head>
		<title>Photo-Hub</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<link href="css/mystyle.css" rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script src="js/hander.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var ispass1=false;
				var ispass2=false;
				var ispass3=false;
				var ispass4=false;
				$.ajax(
						{
							url:"CenterController",
							type:"get",
							data:{'operator':'init','page':'index','part':'categroy'},
							dataType:"JSON",
							success:function(data){
								for(var i=0;i<data.length;i++){
									var $input=$(".list1 li input").eq(i);
									$input.attr('value',data[i].id);
									var $a=$(".list1 li a").eq(i);
									$a.html(data[i].name);
								}
							}
						}
					);
				$(".register-top-grid input[name='userName']").focus();
				$(".register-top-grid input[name='userName']").blur(function(){
					//alert($(this).val());
					if($(this).val().length<3||$(this).val().length>20){
						$(this).next(".tip").html("the length of userName is between 3 to 20");
						return;
					}else{
						$(this).next(".tip").html("");
						var reg=/^\s*[a-zA-Z_]\w+/;
						if(!reg.test($(this).val())){
							$(this).next(".tip").html("the start of userName should be a letter");
							return;
						}
						$.ajax({
							url:"CenterController",
							data:{'operator':'register','type':'check','value':$(this).val()},
							dataType:'text',
							success:function(data){
								//alert(data);
								if(!(data=='ok')){
									$(".register-top-grid input[name='userName']").next(".tip").html(data);
									return;
								}
								ispass1=true;
							}
						});

					}
				});
				$(".register-top-grid input[name='email']").blur(function(){
					  var reMail =/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/;
					  var value=$(this).val();
					  if(!reMail.test(value)){
						  $(this).next(".tip").html("the email is wrong");
						  return;
					  }else{
						  $(this).next(".tip").html("");
					  }
					  ispass2=true;
				});
				 $(".register-bottom-grid input[name='password']").blur(function(){
					var value=$(this).val();
					if(value.length<3||value.length>15){
						$(this).next(".tip").html("the length of password is between 3 to 15");
						return;
					}else{
						$(this).next(".tip").html("");
					}
					ispass3=true;
				});

				$(".register-bottom-grid input[name='repassword']").blur(function(){
					var value1=$(this).val();
					var value2=$(".register-bottom-grid input[name='password']").val();
					if(value1!=value2){
						$(this).next(".tip").html("the sencond password is not same sa the first passowrd");
						return;
					}else{
						$(this).next(".tip").html("");
					}
					ispass4=true;
				});
				$(".news-letter").click(function(){
					var $checkbox=$(".news-letter input[type='checkbox']");
					if(($checkbox.is(":checked"))){
						$(".news-letter").css('outline','none');
					}
				});
				$(".register-but input[type='button']").click(function(){
					var $checkbox=$(".news-letter input[type='checkbox']");
					if(!($checkbox.is(":checked"))){
						$(".news-letter").css('outline','rgb(165,199,254) solid 1px');
						return;
					}
					if($(".register-top-grid input[name='userName']").val().trim()==""){
						$(".register-top-grid input[name='userName']").next(".tip").html("the userName should be not empty");
						return ;
					}
					if($(".register-top-grid input[name='email']").val().trim()==""){
						$(".register-top-grid input[name='email']").next(".tip").html("the email should be not empty");
						return ;
					}
					if($(".register-bottom-grid input[name='password']").val().trim()==""){
						$(".register-bottom-grid input[name='password']").next(".tip").html("the password should be not empty");
						return ;
					}
					if($(".register-bottom-grid input[name='repassword']").val().trim()==""){
						$(".register-bottom-grid input[name='repassword']").next(".tip").html("the password should be not empty");
						return ;
					}
					if(!ispass1 || !ispass2 || !ispass3 || !ispass4){
						return;
					}
					$.ajax({
						url:"CenterController",
						data:{
							'operator':'register',
							'type':'submit',
							'userName':$(".register-top-grid input[name='userName']").val(),
							'email':$(".register-top-grid input[name='email']").val(),
							'password':$(".register-bottom-grid input[name='password']").val()
							},
						type:"post",
						dataType:"text",
						success:function(data){
							$(".register-but input[type='button']").next(".tip").html(data);
						},
						async:true
					});
				});
			});
		</script>
	</head>
	<body>
		<div class="header">
	      <div class="container">
	  	     <div class="logo">
				<h1><a href="index.html">Photo Hub</a></h1>
			 </div>
			 <div class="top_right">
			   <ul class="top_right_main">
					<li><a href="register.html">Register</a></li>|
					<li class="login" >
						 <div id="loginContainer"><a href="javascript:void();" id="loginButton"><span>Login</span></a>
							  <div id="loginBox">
								  <form id="loginForm">
					                <fieldset id="body">
					                	<fieldset>
					                          <label for="userName">userName</label>
					                          <input type="text" name="userName" id="userName">
					                    </fieldset>
					                    <fieldset>
					                            <label for="password">Password</label>
					                            <input type="password" name="password" id="password">
					                     </fieldset>
					                    <input type="button" id="login" value="Sign in">
					                	<label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
					                	<div class="tip clr"></div>
					            	</fieldset>
					                 <span><a href="forgetPassword.html">Forgot your password?</a></span>
								   </form>
						      </div>
					      </div>
					  </li>
						<li>
						</li>
			   </ul>
					<script type="text/javascript">
								var value=getCookie('loginInfo');
								if(value.trim()!=""){
									$(".top_right_main").html("<li>welcome! <a href='javascript:void(void);' id='personal'>"+value+"</a>&nbsp;"
									+"<a href='javascript:void(void);' id='exit'>Exit</a></li>");
								}
					</script>
				</div>
			 <div class="clearfix"></div>
			</div>
		</div>
		<div class="register">
			<div class="container">
			   <form>
					 <div class="register-top-grid">
						<h1>PERSONAL INFORMATION</h1>
						 <div>
							<span>UserName<label>*</label></span>
							<input type="text" name="userName" value=""><span class="tip"></span>
						 </div>
						 <div class="clr"></div>
						 <div>
							 <span>Email Address<label>*</label></span>
							 <input type="text" name="email" value=""><span class="tip"></span>
						 </div>
						 <div class="clearfix"> </div>
						   <a class="news-letter" href="javascript:void();">
							 <label class="checkbox"><input type="checkbox" checked=""><i> </i>Sign Up for Newsletter</label>
						   </a>
						 </div>
					     <div class="register-bottom-grid">
							    <h4>LOGIN INFORMATION</h4>
								 <div>
									<span>Password<label>*</label></span>
									<input type="password" name="password" ><span class="tip"></span>
								 </div>
								 <div>
									<span>Confirm Password<label>*</label></span>
									<input type="password" name="repassword" ><span class="tip"></span>
								 </div>
								 <div class="clearfix"> </div>
						 </div>
						 <div class="register-but">
						   <input type="button" id="submit" value="submit">&nbsp;&nbsp;<span class="tip"></span>
						   <div class="clearfix"> </div>
						</div>
					</form>
					<div class="clearfix"> </div>
			   </div>
		</div>
		<div class="grid_2">
			<div class="container">
				<div class="col-md-3 col_2">
					<h3>Stock Photo<br>Categories</h3>
				</div>
				<div class="col-md-9 col_5">
					<div class="col_1_of_5 span_1_of_5">
						<ul class="list1">
						    <li>
						    <input type="hidden" value="1">
						    <a href="stock.html">Abstract</a>
						    </li>
				            <li><input type="hidden" value="2"><a href="stock.html">Animals/Wildlife</a></li>
				            <li><input type="hidden" value="3"><a href="stock.html">The Arts</a></li>
				            <li><input type="hidden" value="4"><a href="stock.html">Backgrounds/Textures</a></li>
				            <li><input type="hidden" value="5"><a href="stock.html">Beauty/Fashion</a></li>
				            <li><input type="hidden" value="6"><a href="stock.html">Buildings/Landmarks</a></li>
			            </ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<ul class="list1">
						    <li><input type="hidden" value="7"><a href="stock.html">Business/Finance</a></li>
				            <li><input type="hidden" value="8"><a href="stock.html">Celebrities</a></li>
				            <li><input type="hidden" value="9"><a href="stock.html">Editorial</a></li>
				            <li><input type="hidden" value="10"><a href="stock.html">Education</a></li>
				            <li><input type="hidden" value="11"><a href="stock.html">Food and Drink</a></li>
				            <li><input type="hidden" value="12"><a href="stock.html">Healthcare/Medical</a></li>
			            </ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<ul class="list1">
						    <li><input type="hidden" value="13"><a href="stock.html">Holidays</a></li>
				            <li><input type="hidden" value="14"><a href="stock.html">Illustrations/Clip-Art</a></li>
				            <li><input type="hidden" value="15"><a href="stock.html">Industrial</a></li>
				            <li><input type="hidden" value="16"><a href="stock.html">Interiors</a></li>
				            <li><input type="hidden" value="17"><a href="stock.html">Miscellaneous</a></li>
				            <li><input type="hidden" value="18"><a href="stock.html">Model Released Only</a></li>
			            </ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<ul class="list1">
						    <li><input type="hidden" value="19"><a href="stock.html">Nature</a></li>
				            <li><input type="hidden" value="20"><a href="stock.html">Objects</a></li>
				            <li><input type="hidden" value="21"><a href="stock.html">Parks/Outdoor</a></li>
				            <li><input type="hidden" value="22"><a href="stock.html">People</a></li>
				            <li><input type="hidden" value="23"><a href="stock.html">Religion</a></li>
				            <li><input type="hidden" value="24"><a href="stock.html">Science</a></li>
			            </ul>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<script type="text/javascript">
			//处理下方的categroy
			$.ajax(
					{
						url:"CenterController",
						type:"get",
						data:{'operator':'init','page':'index','part':'categroy'},
						dataType:"JSON",
						success:function(data){
							for(var i=0;i<data.length;i++){
								var $input=$(".list1 li input").eq(i);
								$input.attr('value',data[i].id);
								var $a=$(".list1 li a").eq(i);
								$a.html(data[i].name);
							}
						}
					}
				);
		</script>
		<div class="grid_3">
		  <div class="container">
		  	 <ul id="footer-links">
				<li><a href="#">Terms of Use</a></li>
				<li><a href="#">Royalty Free License</a></li>
				<li><a href="#">Extended License</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Support</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Categories</a></li>
	         </ul>
	         <p>Copyright © Photo-Hub. All Rights Reserved. </p>
		  </div>
		</div>
	</body>
</html>
